<template>
  <el-card class="box-card" shadow="always">
    <div slot="header" class="clearfix">
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="老人">
          <search-input v-model="queryparam.elderlyCode" placeholder="请输入老人姓名或编号、证件号" :config="sConfig"></search-input>
          <!-- <el-select
            v-model="queryparam.elderlyCode"
            filterable
            clearable
            remote
            placeholder="请输入老人姓名或编号、证件号"
            :remote-method="searchElderly"
            :loading="aloading">
            <el-option style="width: 600px; font-size: 10px"
              v-for="item in elderlyList"
              :key="item.elderlyCode"
              :label="item.elderlyName"
              :value="item.elderlyCode">
              <span>
            <tr>
              <td style="min-width: 100px;"><div ><el-tag size="mini">档案号</el-tag>{{item.elderlyCode}}</div></td>
              <td style="min-width: 100px;"><div ><el-tag size="mini">姓名</el-tag>{{item.elderlyName}}</div></td>
              <td style="min-width: 200px"><div ><el-tag size="mini">证件号</el-tag>{{item.cardNo}}</div></td>
            </tr>
          </span>
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="入住状态">
          <el-select v-model="queryparam.checkinStatus"  placeholder="入住状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="入住中" value="1"></el-option>
            <el-option label="已退住" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchAccounts">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="checkInData"
        height="500"
        border
        style="width: 100%">
        <el-table-column label="老人信息" header-align="center">
          <el-table-column
            prop="elderlyCode"
            label="老人编号"
            header-align="center"
            min-width="80">
          </el-table-column>
          <el-table-column
            prop="elderlyName"
            label="老人姓名"
            header-align="center"
            min-width="60">
          </el-table-column>
          <el-table-column
            prop="cardNo"
            min-width="150"
            header-align="center"
            label="老人证件号">
          </el-table-column>
        </el-table-column>
        <el-table-column label="入住信息" header-align="center">
          <el-table-column
            prop="checkInMark"
            min-width="100"
            header-align="center"
            label="入住编号">
          </el-table-column>
          <el-table-column
            prop="checkedInTime"
            min-width="100"
            header-align="center"
            label="入住时间">
          </el-table-column>
          <el-table-column
            prop="checkInTypeName"
            min-width="60"
            header-align="center"
            label="入住类型">
          </el-table-column>
          <el-table-column
            prop="retreat"
            min-width="60"
            header-align="center"
            label="入住状态">
            <template slot-scope="scope">
              <el-tag size="medium" v-if="scope.row.retreat" type="danger">已退住</el-tag>
              <el-tag size="medium" v-else >入住中</el-tag>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          header-align="center"
          align="center"
          min-width="70">
          <template slot-scope="scope">
            <el-button  type="text" size="small" @click="showdetail(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="tobill(scope.row)">费用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="10"
        @current-change="1"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageparam.pageSize"
        :current-page="pageparam.currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageparam.total">
      </el-pagination>
    </div>
    <account_detail_dialog ref="accountDetailDialog"></account_detail_dialog>
  </el-card>
</template>

<script>
  import { searchElderlyFilesOfCondition } from '@/api/elderly'
  import { searchCheckInInfoOfPage } from '@/api/checkin'
  import AccountDetail from './components/AccountDetail'
  import searchInput from '@/components/searchInput'
    export default {
        name: "Account",
      components: {
        account_detail_dialog: AccountDetail,
        searchInput
      },
      filters: {
        money(val)
        {
          val = val.toString().replace(/\$|\,/g, "");
          if (isNaN(val))
          {
            val = "0";
          }
          let sign = (val == (val = Math.abs(val)));
          val = Math.floor(val * 100 + 0.50000000001);
          let cents = val % 100;
          val = Math.floor(val / 100).toString();
          if (cents < 10)
          {
            cents = "0" + cents;
          }
          for (let i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++)
          {
            val = val.substring(0, val.length - (4 * i + 3)) + "," + val.substring(val.length - (4 * i + 3));
          }

          return (((sign) ? "" : "-") + val + "." + cents);
        }
      },
      data() {
        return {
          sConfig: {
            api: '/sinohis/pension/profession/elderlyfile/query/file/@',
            label: 'elderlyName',
            value: 'elderlyCode',
            keys: [
              { name: '姓名', key: 'elderlyName', type: 'success' },
              { name: '证件号', key: 'cardNo' },
            ]
          },
          checkInData: [],
          pageparam: {
            currentPage: 1,
            pageSize: 10,
            total: 0
          },
          queryparam: {
            elderlyCode: undefined,
            checkinStatus: undefined
          },
          elderlyList: [],
          aloading: false
        }
      },
      methods: {
        async searchElderly(query){
          if (query !== '') {
            this.aloading = true
            let elderlyRes = await searchElderlyFilesOfCondition(query)
            if(elderlyRes.code=='200' && elderlyRes.data){
              this.aloading = false
              this.elderlyList = elderlyRes.data
            }else{
              this.aloading = false
              this.elderlyList = []
            }
          }else{
            this.elderlyList = []
          }
        },
        //查询账户信息
        async searchAccounts(){
          let params = {
            currPageNo: this.pageparam.currentPage,
            limit: this.pageparam.pageSize,
            elderlyCode: this.queryparam.elderlyCode,
            checkinStatus: this.queryparam.checkinStatus
          }
          let checkinRes = await searchCheckInInfoOfPage(params)
          if(checkinRes.code == '200'){
            this.pageparam.total = checkinRes.data.total
            if(checkinRes.data.total == 0){
              this.checkInData = []
            }else{
              this.checkInData = checkinRes.data.data
            }
          }else{
            this.$message.error('查询异常，'+checkinRes.msg);
            this.pageparam.total = 0
            this.checkInData = []
          }
        },
        showdetail(row){
          this.$refs["accountDetailDialog"].show(row);
        },
        tobill(row){
          this.$router.push({
            path: 'bill/'+row.checkInMark
          })
        }
      }
    }
</script>

<style scoped>
  .box-card >>> .el-input__inner {
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    /*outline: medium;*/
  }
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
</style>
